<template>
  <div class="worflowTable" id="worflowTableContent">
    <!-- 功能按钮 -->
    <div class="keyWord_button">
      <div class="keyWord_button_item">
        <!-- <span> 标题名称：</span> -->
        <a-input class="selectLable" v-model:value="instanceFlowName" @pressEnter="fetchWorkFlowList" @blur="fetchWorkFlowList" placeholder="请输入标题名称" allow-clear>
          <template #suffix>
              <i class="iconfont icon-search" @click="fetchWorkFlowList()"></i>
            </template>
         </a-input>
      </div>
      <div class="keyWord_button_item">
        <!-- <span>工作流名称：</span> -->
        <a-input class="selectLable" v-model:value="searchworkFlowName"  @pressEnter="fetchWorkFlowList" @blur="fetchWorkFlowList" placeholder="请输入工作流名称" allow-clear>
          <template #suffix>
              <i class="iconfont icon-search" @click="fetchWorkFlowList()"></i>
            </template>
        </a-input>
      </div>
      <div class="keyWord_button_item">
        <span class="flowScene_label">状态：</span>
        <a-select
          v-model:value="instanceStatus"
          :options="instanceStatusOptions"
          :style="{ width: '118px' }"
          @change="fetchWorkFlowList"
        >
        </a-select>
      </div>
      <div class="keyWord_button_item">
        <span class="flowScene_label">应用场景：</span>
        <a-select
          v-model:value="flowScene"
          :options="flowSceneStatusOptions"
          :style="{ width: '118px' }"
          @change="fetchWorkFlowList"
        >
        </a-select>
      </div>
      <!-- <a-button class="addButton" type="primary" @click="fetchWorkFlowList">
        搜索
      </a-button> -->
      <a-button
        class="addButton"
        @click="reset"
      >
        重置
      </a-button>
    </div>
    <!-- 工作流的table表格 -->
    <baseTable
      :columns="columns.workFlowInstanceColumns"
      :dataSource="configData.records"
      :isShowPagination="isShowPagination"
      :total="configData.total"
      @changePage="changePage"
      :isSelect="true"
      :scroll="scroll"
      :rowSelection="1"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'statusDesc'">
          <p :class="`statusDesc${record.status}`" class="statusDesc">
            {{ record.statusDesc }}
          </p>
        </template>
        <template v-if="column.dataIndex === 'completeTime'">
          <span v-if="!record.completeTime">-</span>
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <div class="oparation">
            <a
              class="eidtRecords"
              :class="{ disable: !btnPerm.includes('auditDetailAble') }"
              @click="auditDetail(record)"
            >
              审批详情
            </a>
            <a-popconfirm
              placement="topRight"
              ok-text="终止审核"
              cancel-text="取消"
              @confirm="stopWorkFlow(record)"
              v-if="record.status == 1"
            >
              <template #title>
                <p style="width: 356px">
                  终止审核后，该工作流审核所提交的内容将会驳回到草稿状态，需用户重新提交审核！
                </p>
              </template>
              <a>终止审核</a>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </baseTable>
  </div>
  <!-- 新建或编辑工作流模态框 -->
  <base-modal
    :width="modAlProps.width"
    :isVisible="isVisible"
    :title="modAlProps.title"
    :buttons="buttons"
    @handleOk="buttonMessage"
    @handleCancle="isVisible = false"
    class="sensitive_modal"
  >
    <template v-slot:body>
      <div>
        <a-form
          name="advanced_search"
          class="ant-advanced-search-form"
          autoComplete="off"
          :model="formState"
          ref="sensitiveFrom"
          v-if="isVisible"
        >
          <a-form-item
            :name="['flowName', 'value']"
            :label="formState.flowName.label"
            :rules="[formState.flowName.rule]"
          >
            <a-input
              v-model:value="formState.flowName.value"
              show-count
              :maxlength="25"
              allow-clear
            />
          </a-form-item>
          <a-form-item
            :name="['flowScene', 'value']"
            :label="formState.flowScene.label"
            :rules="[formState.flowScene.rule]"
          >
            <a-select
              v-model:value="formState.flowScene.value"
              style="width: 256px"
              :options="formState.flowScene.options.map((item: any, index: number) => ({ value: item.value, label: item.label }))"
            ></a-select>
          </a-form-item>
          <a-form-item :label="formState.remark.label" class="remark">
            <a-textarea
              v-model:value="formState.remark.value"
              show-count
              :maxlength="200"
              :allow-clear="formState.remark.value"
              :placeholder="formState.remark.placeholder"
            />
          </a-form-item>
        </a-form>
      </div>
    </template>
  </base-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, createVNode } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import columns from "@/components/table/tableConfig/columnsName";
import { getTableScroll } from "@/components/table/tableConfig/table";
import baseModal from "@/components/modal/baseModal.vue";
import { useRouter } from "vue-router";
import request from "@/api/index";
import { scrollType, configDataType, modeProp } from "@/type.d";
import { message } from "ant-design-vue";
import { checkrule } from "./formRuler";
import { routerPerm } from "@/utils/common";
// TS
interface dataSourceType {
  [propName: string]: any;
}
//data
const btnPerm = ref<any[]>([]);
//路由
const router = useRouter();
//页面头部
const instanceFlowName = ref<string | number>("");
const searchworkFlowName = ref<string>("");
const instanceStatus = ref<string | number>("");
const flowScene = ref<String>(""); // 筛选过滤表格数据
const instanceStatusOptions = ref<dataSourceType["options"]>([
  // 应用场景
  {
    value: "",
    label: "全部",
  },
  {
    value: "1",
    label: "审核中",
  },
  {
    value: "2",
    label: "审核完成",
  },
  {
    value: "3",
    label: "被撤回",
  },
  {
    value: "4",
    label: "已拒绝",
  },
  {
    value: "5",
    label: "自动驳回",
  },
  {
    value: "6",
    label: "被终止",
  },
  {
    value: "7",
    label: "已删除或更新终止",
  },
]);
const flowSceneStatusOptions = ref<dataSourceType["options"]>([
  // 应用场景
  {
    value: "",
    label: "全部",
  },
  {
    value: "1",
    label: "内容发布",
  },
  {
    value: "2",
    label: "投票调查",
  },
  {
    value: "3",
    label: "领导信箱",
  },
]);

//表格相关数据
const isShowPagination = true; // 是否需要配分页器

const reqTelListOption = ref({
  //控制分页数据请求的变量集合
  pageNumber: 0,
  pageSize: 10,
  tplType: 1,
});
//编辑项

let scroll: scrollType = reactive({ y: "", isFixed: false });
//工作流表格数据
let configData = ref<configDataType>({ total: 0, size: 10, records: [] });

// const dataList = ref(dataSource.value.slice(0, 10))
// 模态框数据
const sensitiveFrom = ref<any>("sensitiveFrom");
const isVisible = ref<boolean>(false);
const modAlProps: modeProp = reactive({
  width: "M",
  title: "编辑工作流",
});

const formState = reactive<dataSourceType>({
  flowName: {
    value: "",
    rule: {
      required: true,
      validator: checkrule,
      trigger: ["blur"],
      msg1: "工作流不可为空！",
      msg2: "工作流名称已存在！",
      api: "fetchSensitiveWordTableUnique",
      id: "",
      params: {},
    },
    label: "工作流名称",
  },
  flowScene: {
    value: "",
    rule: {
      required: true,
      validator: checkrule,
      trigger: ["blur"],
      msg1: "请选择应用场景！",
      api: "fetchsenSitiveWordTableInsensitiveword",
      id: "",
      params: {},
    },
    options: [
      {
        value: 1,
        label: "内容发布",
      },
      {
        value: 2,
        label: "投票调查",
      },
      {
        value: 3,
        label: "领导信箱",
      },
    ],
    label: "应用场景",
  },
  remark: {
    value: "",
    label: "工作流描述",
    placeholder: "不超过500个字",
  },
  id: "",
});

const buttons = ref<dataSourceType[]>([]); //模态框button按钮个数和文案修改
// 当前页和数量
const pageCurrent = ref<any>(1);
const pageSize = ref<any>(10);
//onmounted
onMounted(() => {
  btnPerm.value = routerPerm();
  fetchWorkFlowList();
});

//methods
// 重置
const reset = () => {
  instanceFlowName.value = '';
  instanceStatus.value = '';
  flowScene.value = '';
  searchworkFlowName.value = '';
  fetchWorkFlowList()
};
//获取工作流的分页列表数据展示
const fetchWorkFlowList = async (data = "") => {
  const postData: dataSourceType = {
    pageNumber: data ? 0 : reqTelListOption.value.pageNumber || pageCurrent.value,
    pageSize: data ? 10 : reqTelListOption.value.pageSize || pageSize.value,
  };
  searchworkFlowName.value ? (postData.workflowName = searchworkFlowName.value) : "";
  flowScene.value ? (postData.flowScene = flowScene.value) : "";
  instanceFlowName.value ? (postData.name = instanceFlowName.value) : "";
  instanceStatus.value ? (postData.status = instanceStatus.value) : "";
  const telData = await request.fetchWorkFlowInstanceTable(postData);
  let reqData = telData;
  configData.value.total = reqData.total;
  configData.value.size = reqData.size;
  configData.value.records = reqData.records || [];
  nextTick(() => {
    scroll.y = getTableScroll(130, "worflowTableContent", 34).y;
    scroll.isFixed = getTableScroll(130, "worflowTableContent", 34).isFixed;
  });
};
// 工作流审核详情
const auditDetail = (record: dataSourceType) => {
  if (!btnPerm.value.includes("auditDetailAble")) return;
  router.push({
    path: "/config/workFlow/auditDetail",
    query: {
      id: record.id,
    },
  });
};
// 设置工作流流程图

const setWorkFlow_G6 = (record: dataSourceType) => {
  router.push({
    path: "/config/workFlow/detail",
    query: {
      id: record.id,
    },
  });
};
//终止工作流
const stopWorkFlow = (record: dataSourceType) => {
  const params = {
    id: record.id,
  };
  request
    .stopWorkFlowInstanceTable(params)
    .then((res: dataSourceType) => {
      if (res.code == "00000 00000") {
        fetchWorkFlowList();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
const buttonMessage = () => {
  const params = {
    flowName: formState.flowName.value,
    flowScene: formState.flowScene.value,
    id: formState.id,
    remark: formState.remark.value,
  };
  request[!formState.id ? "addWorkFlowRecord" : "editWorkFlowTable"](params)
    .then((res: dataSourceType) => {
      if (res.code == "00000 00000") {
        fetchWorkFlowList();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
      isVisible.value = false;
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
// 获取分页的改变
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  reqTelListOption.value.pageNumber = data.pageCurrent;
  reqTelListOption.value.pageSize = data.pageSize;
  fetchWorkFlowList();
};

//computed
</script>

<style lang="less" scoped>
.worflowTable {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow: hidden;

  .keyWord_button {
    margin-left: auto;
    margin-right: 0px;
    display: flex;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.02);
    margin-bottom: 16px;

    .keyWord_button_item {
      font-size: 14px;
      color: #333;
      margin-right: 16px;
      .selectLable {
        max-width: 192px;
        height: 32px;
      }
    }

    .addButton:nth-of-type(1) {
      margin-right: 16px;
    }
  }

  :deep(.ant-table-thead .ant-table-cell:nth-last-of-type(1)) {
    text-align: right;
    margin-right: 16px;
  }
}

:deep(.ant-form-item) {
  width: 596px;
  display: flex;

  // margin-left: 28px;
  .ant-form-item-control {
    width: 494px;
    margin-left: 4px;
    flex: unset;
  }

  .ant-form-item-label {
    flex-grow: 0;
    width: 94px;
    text-align: right;
  }
}

:deep(.ant-form-item:nth-last-of-type(1)) {
  margin-left: 0px;
  margin-bottom: 0px;
}
</style>
<style>
.ant-tooltip {
  max-width: 700px;
}

.worflowTable .ant-table-wrapper table > thead > tr > th:nth-child(1) {
  padding-left: 16px;
}

.worflowTable .ant-table-wrapper table > tbody > tr > td:nth-child(1) {
  padding-left: 16px;
  padding-right: 16px;
}

.statusDesc {
  padding: 5px 8px;
  font-size: 12px;
  width: fit-content;
  line-height: 12px;
}

.statusDesc1 {
  background: #edf7ff;
  border-radius: 2px;
  border: 1px solid #9cccff;
  color: #1f6ded;
}

.statusDesc2 {
  background: #f6ffed;
  border-radius: 2px;
  border: 1px solid #b7eb8f;
  color: #389e0d;
}

.statusDesc3 {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: raba(0, 0, 0, 0.45);
}

.statusDesc4 {
  background: #fff1f0;
  border-radius: 2px;
  border: 1px solid #ffa39e;
  color: #cf1322;
}

.statusDesc5 {
  background: #fff7e6;
  border-radius: 2px 2px 2px 2px;
  color: #d46b08;
  border: 1px solid #ffd591;
}

.statusDesc6 {
  height: 22px;
  background: #fff2e8;
  border-radius: 2px 2px 2px 2px;
  color: #d4380d;
  border: 1px solid #ffbb96;
}

.statusDesc7 {
  background: #edf7ff;
  border-radius: 2px;
  opacity: 1;
  border: 1px solid #9cccff;
  color: #9cccff;
}

.oparation {
  display: flex;
  justify-content: space-between;
}
</style>
